<template>
  <div id="zxt"></div>
</template>

<script>
import { defineComponent, ref, computed, nextTick } from "vue";
export default defineComponent({
  name: "Zxt",
});
</script>
<script setup>
import * as echarts from "echarts";

// line title
const lineTitle = ref("本月水质健康分趋势");

// data
const qxtData = ref([
  {
    name: "1日",
    num: 1,
  },
  {
    name: "10日",
    num: 4,
  },
  {
    name: "20日",
    num: 3,
  },
  {
    name: "30日",
    num: 1,
  },
]);

// xAxis Data Comp
const xAxisDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.name);
  });
  return retArr;
});

// line Data Comp
const lineDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.num);
  });
  return retArr;
});
// nextTick异步
nextTick(() => {
  let dom = document.getElementById("zxt");
  let myChart = echarts.init(dom);
  myChart.showLoading();
  myChart.hideLoading();
  let option = {
    backgroundColor: "#000",
    // color: ["#45F19E", "#1ED6FF", "#268AFF"],
    tooltip: {
      trigger: "axis",
      textStyle: { color: "#fff", fontSize: 14 },
      className: "tooltip",
      order: "seriesDesc",
      renderMode: "html",
      backgroundColor: "#1b366a", // 设置背景颜色
      borderColor: "#1b366a", // 边框颜色
      formatter: (params) => {
        return `
            ${params[0].seriesName}<br/>
            ${params[0].marker}
            ${params[0].name} :
            ${
              params[0].value == 0
                ? "-"
                : Number(params[0].value).toLocaleString()
            } 分`;
      },
      axisPointer: {
        lineStyle: {
          width: 2,
          // 移入虚线标尺颜色
          color: "#e28d8d",
        },
      },
    },

    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: true,
        // 轴线设置
        color: "rgba(51, 74, 102, 1)",
        width: 1,
        type: "solid",
      },
      axisLabel: {
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 14, //更改坐标轴文字大小
        },
      },

      data: xAxisDataComp.value,
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(51, 74, 102, 1)",
          width: 1,
          type: "dashed",
        },
      },
      axisLabel: {
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 14, //更改坐标轴文字大小
        },
      },
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "rgba(51, 74, 102, 1)",
          width: 1,
          type: "solid",
        },
      },
    },
    series: [
      {
        name: lineTitle.value,
        type: "line",
        // smooth: true,
        symbol: "circle",
        // showSymbol: false,
        symbolSize: 10,
        lineStyle: {
          color: "rgba(232, 32, 14, 1)",
        },
        itemStyle: {
          shadowColor: "#fff",
          shadowBlur: 10,
          color: "white",
        },
        // label: {
        //     show: true,
        //     position: 'right',
        //     color: '#fff'
        // },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(232, 32, 14, 0.7)",
            },
            {
              offset: 1,
              color: "rgba(232, 32, 14, 0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: lineDataComp.value,
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#zxt {
  width: 50vw;
  height: 50vh;
  background-color: black;
}
</style>
